import { lazy, Suspense } from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))
const Invoice = lazy(() => import('./pages/Invoice'))
const Layout = lazy(() => import('./pages/Layout'))
const Dashboard = lazy(() => import('./pages/Dashboard'))
const OtherPage = lazy(() => import('./pages/OtherPage'))
const NotFound = lazy(() => import('./pages/NotFound'))

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path='/invoices/:invoiceId' element={<Invoice />} />
          <Route path='/layout' element={<Layout />} >
            <Route index element={<Dashboard />} />
            <Route path='dashboard' element={<Dashboard />} />
            <Route path='other' element={<OtherPage />} />
          </Route>
          <Route path='*' element={<NotFound />} />
        </Routes>
      </Suspense>
    </div>
  );
}

export default App;
